Swipebox.

• 
• 
• 
• 

What is Swipebox ?

Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet.

Main Features

1. Swipe gestures for mobile
2. Keyboard Navigation for desktop
3. CSS transitions with jQuery fallback
4. Retina support for UI icons
5. Easy CSS customization

Compatibility

Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.

Basic Usage

Javascript

Include jquery and the swipebox script in your head tags or right before your body closing tag.

<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>

CSS

Include the swipebox CSS style in your head tags.

<link rel="stylesheet" href="src/css/swipebox.css">

HTML

Use a specific class for your links and use the title attribute as caption.

<a href="big/image.jpg" class="swipebox" title="My Caption">
<img src="small/image.jpg" alt="image">
</a>

Fire the plugin

Bind the swipebox behaviour on every link with the "swipebox" class.

<script type="text/javascript">
;( function( $ ) {

	$( '.swipebox' ).swipebox();

} )( jQuery );
</script>

Advanced

Gallery

You can add a rel attribute to your links to seperate your galleries.

<!-- Gallery 1 -->
<a rel="gallery-1" href="big/image1.jpg" class="swipebox">
	<img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox">
	<img src="small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="big/image3.jpg" class="swipebox">
	<img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="swipebox">
	<img src="small/image4.jpg" alt="image">
</a>

Video support

Simply paste a youtube or vimeo video URL in your href attribute. The script will automatically check if it's a youtube or vimeo URL and open the video in the swipebox.

My Video

<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>

Load slides dynamically

You can set your gallery dynamically by passing an array object to the swipebox.

View gallery

$( '#gallery' ).click( function( e ) {
	e.preventDefault();
	$.swipebox( [
		{ href:'big/image1.jpg', title:'My Caption' }, 
		{ href:'big/image2.jpg', title:'My Second Caption' }
	] );
} );

Check open state

if ( $.swipebox.isOpen ) {
	// do stuff
}

Options

<script type="text/javascript">
;( function( $ ) {

	$( '.swipebox' ).swipebox( {
		useCSS : true, // false will force the use of jQuery for animations
		useSVG : true, // false to force the use of png for buttons
		initialIndexOnArray : 0, // which image index to init when a array is passed
		hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
		removeBarsOnMobile : true, // false will show top bar on mobile devices
		hideBarsDelay : 3000, // delay before hiding bars on desktop
		videoMaxWidth : 1140, // videos max width
		beforeOpen: function() {}, // called before opening
		afterOpen: null, // called after opening
		afterClose: function() {}, // called after closing
		loopAtEnd: false // true will return to the first image after the last image is reached
	} );

} )( jQuery );
</script>